:root { --ink: #172136; --muted: #65708a; --cream: #fffdf7; --line: rgba(23, 33, 54, .1); --terracotta: #b97149; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); font-family: "DM Sans", sans-serif; background: #f6f3eb; }
.page-shell { position: relative; display: grid; min-height: 100svh; padding: 40px 22px; place-items: center; overflow: hidden; background: radial-gradient(circle at 7% 8%, #f8d9a8 0, transparent 28%), radial-gradient(circle at 94% 90%, #c5e2dd 0, transparent 28%), #f6f3eb; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .65; }.orb-one { width: 150px; height: 150px; top: 8%; right: 8%; background: #f1a994; }.orb-two { width: 105px; height: 105px; bottom: 7%; left: 8%; background: #9ec6e8; }
.contact-card { position: relative; width: min(100%, 1050px); padding: clamp(32px, 5.5vw, 58px); border: 1px solid rgba(255,255,255,.8); border-radius: 32px; background: rgba(255,253,247,.84); box-shadow: 0 24px 80px rgba(69,58,40,.16); backdrop-filter: blur(14px); }
.heading { max-width: 660px; }.eyebrow { margin: 0 0 15px; color: var(--terracotta); font-size: .73rem; font-weight: 700; letter-spacing: .18em; }.heading h1 { margin: 0; font-family: "Playfair Display", serif; font-size: clamp(2.4rem, 5.6vw, 4.25rem); line-height: .98; letter-spacing: -.045em; }.heading h1 em { color: var(--terracotta); font-weight: 600; }.intro { margin: 21px 0 35px; color: var(--muted); line-height: 1.65; }
.contact-grid { display: grid; grid-template-columns: minmax(280px, .87fr) minmax(320px, 1.13fr); gap: 22px; align-items: stretch; }.contact-details { display: grid; gap: 14px; }.info-card { display: flex; gap: 15px; align-items: flex-start; min-height: 156px; padding: 21px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.58); }.info-icon { display: grid; flex: 0 0 47px; width: 47px; height: 47px; place-items: center; border-radius: 14px; color: white; }.info-icon svg { width: 23px; height: 23px; fill: currentColor; }.location-icon { background: var(--terracotta); }.whatsapp-icon { background: #25d366; }.label { display: block; margin: 1px 0 6px; color: var(--terracotta); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } address { color: var(--ink); font-size: .96rem; font-style: normal; font-weight: 600; line-height: 1.55; }.text-link { display: inline-block; margin-top: 11px; color: var(--ink); font-size: .86rem; font-weight: 700; text-decoration-color: rgba(185,113,73,.55); text-underline-offset: 4px; }.text-link span { color: var(--terracotta); }
.whatsapp-card { position: relative; align-items: center; min-height: 130px; color: var(--ink); text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }.whatsapp-card:hover, .whatsapp-card:focus-visible { transform: translateY(-3px); border-color: transparent; box-shadow: 0 13px 24px rgba(23,33,54,.12); outline: none; }.whatsapp-card strong { display: block; font-size: 1.15rem; }.whatsapp-card small { display: block; margin-top: 4px; color: var(--muted); font-size: .83rem; }.arrow { margin-left: auto; color: #96a0b3; font-size: 1.35rem; transition: transform .22s ease, color .22s ease; }.whatsapp-card:hover .arrow { transform: translate(2px,-2px); color: var(--ink); }.whatsapp-card.is-clicked { transform: scale(.985); }
.map-wrap { min-height: 300px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #e8e4d9; }.map-wrap iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; filter: saturate(.82) contrast(.97); }
@media (max-width: 700px) { .page-shell { padding: 20px 14px; }.contact-card { padding: 32px 22px; border-radius: 25px; }.contact-grid { grid-template-columns: 1fr; }.map-wrap { min-height: 280px; }.map-wrap iframe { min-height: 280px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }